svelte 5

7 files changed, 132 insertions, 112 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 03cad4ff..65911eee 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run, preventDefault } from 'svelte/legacy';
+
   import { invalidate } from "$app/navigation";
   import { browser } from "$app/environment";
   import { hexToUint8Array } from "uint8array-extras";
@@ -8,7 +10,7 @@
   import { bech32m } from "@scure/base";
   import { page } from "$app/stores";
 
-  export let data;
+  let { data, children } = $props();
 
   let { encode, toWords } = bech32m;
 
@@ -22,10 +24,9 @@
     follows,
     followers,
     followList,
-  } = data;
-  let { currency, npub, username: n, display } = subject;
+  } = $state(data);
+  let { currency, npub, username: n, display } = $state(subject);
 
-  $: refresh(data);
   let refresh = (data) => {
     ({
       events,
@@ -41,15 +42,8 @@
     ({ currency, npub, username: n, display } = subject);
   };
 
-  $: stripped = n.replace(/\s/g, "");
-  $: username = n.length > 60 ? n.substr(0, 6) : display || stripped;
-  $: lnaddr = subject?.anon
-    ? subject.lud16 || undefined
-    : `${stripped}@${$page.url.host}`;
-  $: profile = `${$page.url.host}/${subject.anon ? npub : stripped}`;
 
-  let list = [];
-  $: followList.then((l) => (list = l));
+  let list = $state([]);
   let follow = async () => {
     list = [...list, subject.pubkey];
     let tags = await get(
@@ -95,15 +89,14 @@
     }
   };
 
-  $: following = list.some((t) => t.includes(subject.pubkey));
 
-  let showBio;
+  let showBio = $state();
   let toggleBio = () => (showBio = !showBio);
 
-  let showDetails;
+  let showDetails = $state();
   let toggleDetails = () => (showDetails = !showDetails);
 
-  let password;
+  let password = $state();
 
   let reset = async () => {
     try {
@@ -113,28 +106,41 @@
       fail(e.message);
     }
   };
+  run(() => {
+    refresh(data);
+  });
+  let stripped = $derived(n.replace(/\s/g, ""));
+  let username = $derived(n.length > 60 ? n.substr(0, 6) : display || stripped);
+  let lnaddr = $derived(subject?.anon
+    ? subject.lud16 || undefined
+    : `${stripped}@${$page.url.host}`);
+  let profile = $derived(`${$page.url.host}/${subject.anon ? npub : stripped}`);
+  run(() => {
+    followList.then((l) => (list = l));
+  });
+  let following = $derived(list.some((t) => t.includes(subject.pubkey)));
 </script>
 
 <div class="container mx-auto w-full px-4 flex flex-wrap lg:flex-nowrap">
-  <div class="hidden lg:block lg:w-[280px] xl:w-[360px]" />
+  <div class="hidden lg:block lg:w-[280px] xl:w-[360px]"></div>
   <div
     class="w-full lg:w-[280px] xl:w-[360px] lg:absolute space-y-2 left-20 mx-auto"
   >
     <button
       type="button"
-      on:click={toggleDetails}
+      onclick={toggleDetails}
       class="flex text-3xl font-bold text-center mx-auto justify-center gap-2"
     >
       <div class="my-auto break-words">{display || username}</div>
-      <iconify-icon icon="ph:qr-code-bold" width="32" />
+      <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon>
     </button>
 
     {#if subject.address || subject.about}
       <div
         class="text-secondary mx-auto text-center lg:mx-0 break-words space-y-1"
         class:line-clamp-2={!showBio}
-        on:click={toggleBio}
-        on:keydown={toggleBio}
+        onclick={toggleBio}
+        onkeydown={toggleBio}
       >
         <div>
           {subject.address || subject.about}
@@ -177,11 +183,11 @@
                 {lnaddr}
               </div>
               <div class="flex mb-auto gap-1">
-                <button class="my-auto" on:click={() => copy(lnaddr)}
-                  ><iconify-icon icon="ph:copy-bold" width="32" /></button
+                <button class="my-auto" onclick={() => copy(lnaddr)}
+                  ><iconify-icon icon="ph:copy-bold" width="32"></iconify-icon></button
                 >
                 <a href={`/qr/${encodeURIComponent(lnaddr)}`} class="my-auto">
-                  <iconify-icon icon="ph:qr-code-bold" width="32" />
+                  <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon>
                 </a>
               </div>
             </div>
@@ -194,8 +200,8 @@
               {profile}
             </div>
             <div class="flex mb-auto gap-1">
-              <button class="my-auto" on:click={() => copy(profile)}
-                ><iconify-icon icon="ph:copy-bold" width="32" /></button
+              <button class="my-auto" onclick={() => copy(profile)}
+                ><iconify-icon icon="ph:copy-bold" width="32"></iconify-icon></button
               >
               <a
                 href={`/qr/${encodeURIComponent(
@@ -203,7 +209,7 @@
                 )}`}
                 class="my-auto"
               >
-                <iconify-icon icon="ph:qr-code-bold" width="32" />
+                <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon>
               </a>
             </div>
           </div>
@@ -215,11 +221,11 @@
               {npub}
             </div>
             <div class="flex my-auto gap-1">
-              <button class="my-auto" on:click={() => copy(npub)}
-                ><iconify-icon icon="ph:copy-bold" width="32" /></button
+              <button class="my-auto" onclick={() => copy(npub)}
+                ><iconify-icon icon="ph:copy-bold" width="32"></iconify-icon></button
               >
               <a href={`/qr/${encodeURIComponent(npub)}`} class="my-auto">
-                <iconify-icon icon="ph:qr-code-bold" width="32" />
+                <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon>
               </a>
             </div>
           </div>
@@ -230,13 +236,13 @@
     <div class="flex flex-wrap gap-2 w-full text-lg">
       {#if user && user.username !== subject.username && subject.pubkey}
         {#if following}
-          <button class="btn" on:click={unfollow}>
-            <iconify-icon icon="ph:user-bold" width="32" />
+          <button class="btn" onclick={unfollow}>
+            <iconify-icon icon="ph:user-bold" width="32"></iconify-icon>
             <div class="my-auto">{$t("user.unfollow")}</div>
           </button>
         {:else}
-          <button class="btn" on:click={follow}>
-            <iconify-icon icon="ph:user-bold" width="32" />
+          <button class="btn" onclick={follow}>
+            <iconify-icon icon="ph:user-bold" width="32"></iconify-icon>
             <div class="my-auto">{$t("user.follow")}</div>
           </button>
         {/if}
@@ -256,14 +262,14 @@
       <!-- {/if} -->
 
       {#if user?.admin && user.username !== subject.username}
-        <form class="w-full flex" on:submit|preventDefault={reset}>
+        <form class="w-full flex" onsubmit={preventDefault(reset)}>
           <input placeholder="Password reset" bind:value={password} />
           <button
             type="submit"
             class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60"
           >
             <div class="mx-auto flex">
-              <iconify-icon icon="ph:clock" width="32" />
+              <iconify-icon icon="ph:clock" width="32"></iconify-icon>
             </div>
           </button>
         </form>
@@ -275,7 +281,7 @@
     <div
       class="mx-auto space-y-5 lg:max-w-xl xl:max-w-2xl lg:pl-10 mt-5 lg:mt-0"
     >
-      <slot />
+      {@render children?.()}
     </div>
   </div>
 </div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index d14f2f58..e956aab7 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { btc, f, sat } from "$lib/utils";
   import Icon from "$comp/Icon.svelte";
   import Account from "$comp/Account.svelte";
@@ -8,20 +10,22 @@
   import { installPrompt } from "$lib/store";
   import { afterNavigate, preloadData } from "$app/navigation";
 
-  export let data;
+  let { data } = $props();
 
   afterNavigate(() => {
     preloadData(`/${user.username}/receive`);
     preloadData("/send");
   });
 
-  let { accounts, subject, user, items, rates } = data;
-  $: ({ currency } = subject);
-  $: rate = rates[currency];
-  $: total = items.reduce((a, b) => a + b.price * b.quantity, 0);
+  let { accounts, subject, user, items, rates } = $state(data);
+  let { currency } = $derived(subject);
+  let rate = $derived(rates[currency]);
+  let total = $derived(items.reduce((a, b) => a + b.price * b.quantity, 0));
 
   let refresh = (d) => ({ accounts, items, subject, user, rates } = d);
-  $: refresh(data);
+  run(() => {
+    refresh(data);
+  });
 
   let install = async () => {
     if (!$installPrompt) return;
@@ -42,14 +46,14 @@
 
     <a href={`/account/savings`} class="contents">
       <button class="btn btn-lg w-full rounded-2xl whitespace-nowrap">
-        <iconify-icon icon="ph:plus-circle-bold" width="32" />
+        <iconify-icon icon="ph:plus-circle-bold" width="32"></iconify-icon>
         {$t("accounts.addAccount")}
       </button>
     </a>
 
     {#if $installPrompt}
-      <button class="btn btn-accent lg:hidden" on:click={install}>
-        <iconify-icon icon="ph:floppy-disk-bold" width="32" />
+      <button class="btn btn-accent lg:hidden" onclick={install}>
+        <iconify-icon icon="ph:floppy-disk-bold" width="32"></iconify-icon>
         {$t("user.install")}
       </button>
     {/if}
@@ -64,7 +68,7 @@
     {#if total > 0}
       <button
         class="rounded-2xl py-5 px-6 font-bold hover:bg-neutral-700 flex bg-black text-white mx-auto"
-        on:click={checkout}
+        onclick={checkout}
       >
         <div class="mx-auto flex">
           <div class="my-auto text-2xl">
diff --git a/src/routes/(app)/[username]/(profile)/event/[id]/+page.svelte b/src/routes/(app)/[username]/(profile)/event/[id]/+page.svelte
index 74ce1067..9244d392 100644
--- a/src/routes/(app)/[username]/(profile)/event/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/event/[id]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
   import Event from "$comp/Event.svelte";
-  export let data;
+  let { data } = $props();
   let { event } = data;
 </script>
 
diff --git a/src/routes/(app)/[username]/(profile)/followers/+page.svelte b/src/routes/(app)/[username]/(profile)/followers/+page.svelte
index c0080990..b7ad4948 100644
--- a/src/routes/(app)/[username]/(profile)/followers/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/followers/+page.svelte
@@ -4,7 +4,7 @@
   import { browser } from "$app/environment";
   import VirtualScroll from "svelte-virtual-scroll-list";
 
-  export let data;
+  let { data } = $props();
   let { followers } = data;
 </script>
 
@@ -17,34 +17,36 @@
     <div>Loading followers...</div>
   {:then followers}
     {#if followers.length}
-      <VirtualScroll data={followers} key="pubkey" let:data pageMode={true}>
-        <a
-          href={`/${data.pubkey}`}
-          data-sveltekit-preload-data="tap"
-          rel="nofollow"
-        >
-          <div
-            class="flex border-b last:border-b-0 py-4 text-2xl text-secondary"
-            :key={data.pubkey}
+      <VirtualScroll data={followers} key="pubkey"  pageMode={true}>
+        {#snippet children({ data })}
+                <a
+            href={`/${data.pubkey}`}
+            data-sveltekit-preload-data="tap"
+            rel="nofollow"
           >
-            <div class="mb-auto mr-2">
-              <div class="md:hidden">
-                <Avatar size={12} user={data} disabled={true} />
+            <div
+              class="flex border-b last:border-b-0 py-4 text-2xl text-secondary"
+              :key={data.pubkey}
+            >
+              <div class="mb-auto mr-2">
+                <div class="md:hidden">
+                  <Avatar size={12} user={data} disabled={true} />
+                </div>
+                <div class="hidden md:block">
+                  <Avatar size={20} user={data} disabled={true} />
+                </div>
               </div>
-              <div class="hidden md:block">
-                <Avatar size={20} user={data} disabled={true} />
-              </div>
-            </div>
 
-            <div class="w-full flex pb-1 text-black my-auto">
-              <div>
-                <div>{data.display_name || ""}</div>
-                <div class="text-secondary text-lg">@{data.name}</div>
+              <div class="w-full flex pb-1 text-black my-auto">
+                <div>
+                  <div>{data.display_name || ""}</div>
+                  <div class="text-secondary text-lg">@{data.name}</div>
+                </div>
               </div>
             </div>
-          </div>
-        </a>
-      </VirtualScroll>
+          </a>
+                      {/snippet}
+            </VirtualScroll>
     {:else}
       <div>No followers</div>
     {/if}
diff --git a/src/routes/(app)/[username]/(profile)/follows/+page.svelte b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
index 9b2f70d1..ad416500 100644
--- a/src/routes/(app)/[username]/(profile)/follows/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { onMount } from "svelte";
   import { t } from "$lib/translations";
   import Avatar from "$comp/Avatar.svelte";
@@ -6,10 +8,12 @@
   import VirtualScroll from "svelte-virtual-scroll-list";
   import { invalidate } from "$app/navigation";
 
-  export let data;
-  let { follows } = data;
-  $: refresh(data);
+  let { data } = $props();
+  let { follows } = $state(data);
   let refresh = (data) => ({ follows } = data);
+  run(() => {
+    refresh(data);
+  });
 </script>
 
 <div class="px-3 md:px-0 w-full md:w-[400px] mx-auto">
@@ -22,31 +26,33 @@
   {:then follows}
     {#if follows.length}
       {#if browser}
-        <VirtualScroll data={follows} key="pubkey" let:data pageMode={true}>
-          <a
-            href={`/${data.pubkey}`}
-            data-sveltekit-preload-data="tap"
-            rel="nofollow"
-          >
-            <div class="flex py-4 text-lg text-secondary" :key={data.pubkey}>
-              <div class="mb-auto mr-2">
-                <div class="md:hidden">
-                  <Avatar size={12} user={data} disabled={true} />
-                </div>
-                <div class="hidden md:block">
-                  <Avatar size={20} user={data} disabled={true} />
+        <VirtualScroll data={follows} key="pubkey"  pageMode={true}>
+          {#snippet children({ data })}
+                    <a
+              href={`/${data.pubkey}`}
+              data-sveltekit-preload-data="tap"
+              rel="nofollow"
+            >
+              <div class="flex py-4 text-lg text-secondary" :key={data.pubkey}>
+                <div class="mb-auto mr-2">
+                  <div class="md:hidden">
+                    <Avatar size={12} user={data} disabled={true} />
+                  </div>
+                  <div class="hidden md:block">
+                    <Avatar size={20} user={data} disabled={true} />
+                  </div>
                 </div>
-              </div>
 
-              <div class="w-full flex pb-1 text-black my-auto">
-                <div>
-                  <div>{data.display_name || ""}</div>
-                  <div class="text-secondary text-base">@{data.name}</div>
+                <div class="w-full flex pb-1 text-black my-auto">
+                  <div>
+                    <div>{data.display_name || ""}</div>
+                    <div class="text-secondary text-base">@{data.name}</div>
+                  </div>
                 </div>
               </div>
-            </div>
-          </a>
-        </VirtualScroll>
+            </a>
+                            {/snippet}
+                </VirtualScroll>
       {/if}
     {:else}
       <div>No follows</div>
diff --git a/src/routes/(app)/[username]/+layout.svelte b/src/routes/(app)/[username]/+layout.svelte
index ce152831..e3ad7259 100644
--- a/src/routes/(app)/[username]/+layout.svelte
+++ b/src/routes/(app)/[username]/+layout.svelte
@@ -1,9 +1,9 @@
 <script>
-  export let data;
+  let { data, children, fixed } = $props();
 </script>
 
 <div class="content">
-  <slot />
+  {@render children?.()}
 </div>
 
-<slot name="fixed" />
+{@render fixed?.()}
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index e9e5ca43..9a696929 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { send } from "$lib/socket";
   import { btc, post, copy, f, get, types, sat, s, sats } from "$lib/utils";
   import { tick, onMount, onDestroy } from "svelte";
@@ -12,12 +14,11 @@
   import { t } from "$lib/translations";
   import { goto, invalidate } from "$app/navigation";
 
-  export let data;
+  let { data } = $props();
 
   let showOptions;
 
-  let { id, rates, subject, user, src, text } = data;
-  $: refresh(data);
+  let { id, rates, subject, user, src, text } = $state(data);
   let refresh = (data) => {
     ({ id, rates, subject, user, src, text } = data);
   };
@@ -29,19 +30,15 @@
 
   let qr;
 
-  $: link = [types.bitcoin, types.liquid].includes(type)
-    ? text
-    : `lightning:${text}`;
-  $: txt = [types.bitcoin, types.liquid].includes(type) ? hash : text;
 
   let aid = subject.id;
-  let invoice = {
+  let invoice = $state({
     aid,
     type: types.lightning,
     items: [],
     user: subject,
-  };
-  let amount, amountFiat, tip;
+  });
+  let amount = $state(), amountFiat, tip;
 
   let setType = async (type) => {
     invoice.type = type;
@@ -75,10 +72,16 @@
   };
 
   let newAmount;
-  let settingAmount;
+  let settingAmount = $state();
   let toggleAmount = () => (settingAmount = !settingAmount);
-  let fiat;
   let submit;
+  run(() => {
+    refresh(data);
+  });
+  let link = $derived([types.bitcoin, types.liquid].includes(type)
+    ? text
+    : `lightning:${text}`);
+  let txt = $derived([types.bitcoin, types.liquid].includes(type) ? hash : text);
 </script>
 
 <div class="invoice container mx-auto max-w-xl px-4 space-y-2">
@@ -115,7 +118,6 @@
 <SetAmount
   {currency}
   {rate}
-  {fiat}
   {submit}
   {settingAmount}
   {setAmount}